<template>
  <div class="contentTable">
    <div class="contentTableTop">
      <div class="contentTableTitle">视频</div>
      <div class="contentTableForm">
        <el-form ref="form" :model="form" inline>
          <el-form-item label="筛选:">
            <el-select v-model="form.type" :style="{width:'159px'}" size="small" filterable placeholder="请选择"
              @change="handleFilterTypeChange">
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="contentTableContent" v-loading="loading">
      <template v-if="contentList.length">
        <div class="contentTableItem" v-for="item,index in contentList" :key="index">
          <div class="contentTableItemImage" @click="handleContentClick(item,index)">
            <img :src="item.picture" alt="">
            <div class="contentTableItemImageDesc">
              <span>{{typeMapper[item.type]}}</span>
              <span>{{ formatSeconds(item.duration)}}</span>
            </div>
          </div>
          <p class="contentTableItemTitle" @click="handleContentClick(item,index)">
            {{item.videoName}}
          </p>
          <div class="contentTableItemInfo">
            <div class="contentTableItemDate">
              收藏于：{{item.createTime.slice(0,10)}}
            </div>
            <el-dropdown size="small">
              <div class="dropdownDots">
                <div class="dropdownDot"></div>
                <div class="dropdownDot"></div>
                <div class="dropdownDot"></div>
              </div>
              <el-dropdown-menu slot="dropdown">
                <!-- 一定要.native -->
                <el-dropdown-item @click.native="handleCancelCollect(item)">取消收藏</el-dropdown-item>
                <el-dropdown-item @click.native="handleDownloadCollect(item)">下载</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </template>
      <el-empty class="empty" description="暂无收藏内容" v-else></el-empty>
    </div>
    <videoPlayerDialog v-if="videoPlayerVisible" :dialogVisible.sync="videoPlayerVisible" :mediaSrc="mediaSrc"
      :mediaName="mediaName" :playingVideoId.sync="playingVideoId" @refreshOuterVideoList="fetchData" />
  </div>
</template>

<script>
import { campusCollectVideos, campusCollect } from "@/api/mine.js";
import videoPlayerDialog from "@/components/videoPlayerDialog";
import { download } from "@/utils/fileSaver";
export default {
  name: "videoTable",
  components: {
    videoPlayerDialog,
  },
  data() {
    return {
      // 注意L是大写
      mediaSrc: "",
      mediaName: "",
      playingVideoId: "",
      videoPlayerVisible: false,
      contentList: [],
      form: {
        type: "0",
      },
      typeList: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "行业分析",
          value: "2",
        },
        {
          label: "职业分析",
          value: "3",
        },
      ],
      typeMapper: ["全部", "行业", "职业"],
      tablePage: {
        pageNo: 1, // 第几页
        pageSize: 80, // 每页多少条
        pageSizes: [10, 20, 30], //每页多少条的可选数
        total: 0, // 总记录数
      },
      loading: false,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.loading = true;
      const params = {
        type: this.form.type,
        pageNo: this.tablePage.pageNo,
        pageSize: this.tablePage.pageSize,
      };
      campusCollectVideos(params)
        .then((res) => {
          if (res.code == 200) {
            this.contentList = res.data;
          } else {
            console.log(res);
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleContentClick(item, index) {
      this.mediaSrc = item.playUrl;
      this.mediaName = item.videoName;
      this.playingVideoId = item.videoId;
      this.videoPlayerVisible = true;
    },
    handleDownloadCollect(item) {
      const suffixList = [".pdf", ".doc", "docx", "xls", "xlsx", "mp4"];
      const suffix = suffixList.includes(item.playUrl.slice(-4))
        ? item.playUrl.slice(-4)
        : ".mp4";

      download(item.playUrl, item.videoName + suffix);
    },
    handleCancelCollect(item) {
      const params = {
        dataId: item.videoId || item.fileId,
        dataType: 1, //1视频 2毕业案例
        action: 0, //1新增收藏  0取消收藏
      };
      campusCollect(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("取消收藏成功！");
            this.fetchData();
          } else {
            this.$message.error("取消收藏失败！");
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleFilterTypeChange(val) {
      this.tablePage.pageNo = 1;
      this.fetchData();
    },
    formatSeconds(totalSeconds) {
      const hours = Math.floor(totalSeconds / 3600);
      const minutes = Math.floor((totalSeconds % 3600) / 60);
      const seconds = totalSeconds % 60;

      // 确保小时、分钟和秒都是两位数，不足两位前面补零
      const formattedHours = String(hours).padStart(2, "0");
      const formattedMinutes = String(minutes).padStart(2, "0");
      const formattedSeconds = String(seconds).padStart(2, "0");

      return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.contentTable {
  flex: 1;
  padding: 14px 24px;
  padding-right: 0px;
  .contentTableTop {
    display: flex;
    align-items: center;
    .contentTableTitle {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      margin-right: 32px;
      // margin-top: 5px;
    }
    .contentTableForm {
      ::v-deep .el-form-item {
        margin-bottom: 0px;
      }
    }
  }
  .contentTableContent {
    display: flex;
    flex-wrap: wrap;
    margin-top: 14px;
    .empty {
      flex: 1;
      min-height: 500px;
    }
    .contentTableItem {
      margin-right: 13px;
      .contentTableItemImage {
        position: relative;
        font-size: 0;
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 32px;
          height: 29px;
          background-image: url("../../../../assets/detail/videoCoverIcon.png");
          background-repeat: no-repeat;
          background-size: 32px 29px;
        }
        ::after {
          content: "";
          position: absolute;
          bottom: -8px;
          left: 0;
          width: 100%;
          height: 41px;
          background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.3) 100%
          );
          border-radius: 0px 0px 15px 15px;
          z-index: -1;
        }
        img {
          width: 218px;
          height: 137px;
          border-radius: 16px;
          cursor: pointer;
        }
        .contentTableItemImageDesc {
          display: flex;
          justify-content: space-between;
          position: absolute;
          bottom: 8px;
          width: 100%;
          padding: 0 10px 0 15px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          z-index: 2;
          span {
          }
        }
      }
      .contentTableItemTitle {
        width: 217px;
        height: 48px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #333333;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        margin: 10px 0 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-inline-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        cursor: pointer;
      }
      .contentTableItemInfo {
        display: flex;
        justify-content: space-between;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        // line-height: 24px;
        text-align: left;
        font-style: normal;
        cursor: pointer;
        .dropdownDots {
          display: flex;
          flex-direction: column;
          padding-right: 9px;
          padding-left: 10px;
          cursor: pointer;
          .dropdownDot {
            width: 3px;
            height: 3px;
            background: #bbbbbb;
            margin-bottom: 1px;
            border-radius: 50%;
          }
        }
      }
    }
  }
}
::v-deep .el-select .el-input__inner {
  background: #fafcfe;
  border-radius: 4px;
  border: 1px solid #e4edf8;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 22px;
  text-align: left;
  font-style: normal;
}
</style>